html { 
  behavior:sticky-scroll; /* keep position of viewed element */
  overflow:scroll-indicator;
  //aspect: AutoZoom url(autozoom.tis);
  //text-selection-caret-color: transparent;
  background:#fff;
  color:#000;
}

body 
{ 
  font:10pt verdana;
  font-rendering-mode:classic;  
  behavior: htmlarea; /* to make it selectable */
  cursor:text;
}

pre
{
  aspect: AutoScrollX url(autozoom.tis);
  background-color:#F5FFFA;
  border:1px dashed gray;
  padding:4px;
  margin:4px;
  overflow-x:hidden-scroll;
}

pre.over-left {
  background:#F5FFFA linear-gradient(to right, rgba(128,128,128,0.8) 0%, rgba(255,255,255,0.0) 5%, rgba(255,255,255,0.0) 100% );
}

pre.over-right {
  background:#F5FFFA linear-gradient(to left, rgba(128,128,128,0.8) 0%, rgba(255,255,255,0.0) 5%, rgba(255,255,255,0.0) 100% );  
}

pre.over-right.over-left {
  background:#F5FFFA linear-gradient(to right, rgba(128,128,128,0.8) 0%, rgba(255,255,255,0.0) 5%, rgba(255,255,255,0.0) 95%, rgba(128,128,128,0.8) 100% );
}


body > table { border-spacing:0; }
body > table tr > td { 
  padding:4px; 
  border-top:1px solid #dedede;
  vertical-align:top; }
  
body > table tr > td:first-child:not([colspan]) { text-align: right; white-space:nowrap; border-right:1px solid #dedede; }

body > dl:not(.flat) { flow:row(dt, dd); width:*; }
body > dl:not(.flat) > dt { text-align: right; font-weight:bold; margin:0; margin-top:2em; padding-right: 0.3em; 
                            width:max-content; max-width:50vw;white-space:nowrap; overflow-x:hidden; text-overflow:ellipsis; }
body > dl:not(.flat) > dd { border-left:1px solid #dedede; margin:0; margin-top:2em; padding-left: 0.3em; width:*;  }


dt {
  transition: background-color linear 1s;
}

[highlighted]
{
  prototype: HighlightIt url(autozoom.tis);
  background-color: orange;
  transition: background-color linear 0s;
}
